<template>
	<view>
		<view class="item">
			<view class="item-title">内 容：</view>
			<view class="item-content">{{msg.content}}</view>
		</view>
		<view class="item">
			<view class="item-title">消息对象：</view>
			<view class="item-content">{{msg.sendObjectS}}</view>
		</view>
		<view class="item">
			<view class="item-title">发送时间：</view>
			<view class="item-content">{{msg.sendTime}}</view>
		</view>
		
		<view class="btns">
			<button class="btn btn-del" @click="delMsg">删 除</button>
			<button v-if="msg.recall==1" class="btn btn-recall" @click="recall">撤 回</button>
		</view>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex';
	import msgService from "@/services/msg";
	const service = new msgService();
	export default {
		data() {
			return {
				id: '',
				msg: {}
			};
		},
		onLoad({id}) {
			this.id = id;
			this.loadData();
		},
		methods: {
			...mapMutations({
				setMsgContent: 'msgStore/setMsgContent',
			}),
			loadData() {
				service.getMailDetail({id:this.id}).then(res => {
					if (res.success) {
						this.msg = res.result;
					}else{
						uni.showToast({
							title:response.message,
							duration:2000,
							icon:'none'
						})
					}
				});
			},
			delMsg() {
				let self = this;
				uni.showModal({
					content: '消息一旦删除成功，学生和您都看不到此消息内容，是否确认删除？',
					success: function(res) {
						if (res.confirm) {
							service.delWebsiteMail({
								id: self.id
							}).then(response => {
								if (response.success) {
									uni.$emit('itemDelete');
									uni.navigateBack();
								} else {
									uni.showToast({
										title: response.message,
										duration: 2000,
										icon: 'none'
									})
								}
							});
						}
					}
				});
			},
			recall() {
				let self = this;
				uni.showModal({
					content: '消息一旦撤回成功，消息对象清空，需重新选择，是否确认撤回？',
					success: function(res) {
						if (res.confirm) {
							service.recallWebsiteMail({
								id: self.id
							}).then(response => {
								if (response.success) {
									self.setMsgContent(self.msg.content);
									uni.redirectTo({
										url:`/pages/message/createMsg?id=${self.id}`
									});
								} else {
									uni.showToast({
										title: response.message,
										duration: 2000,
										icon: 'none'
									});
								}
							});
						}
					}
				})
				
			}
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		background-color: #fff;
		padding: 20upx;
		margin-bottom: 90upx;
		font-size: 30upx;
		color: #333333;
		line-height: 50upx;
		padding: 0 22upx;
	}
	.item{
		display: flex;
		font-size: 28upx;
		color: #333333;
		line-height:50upx;
		font-weight:600;
		box-shadow: 0 4upx 20upx 0
				rgba(153, 153, 153, 0.15);
		border-bottom: solid 1px #f7f7f7;
		margin:20upx 22upx;
		padding:20upx;
		&-title{
			width: 22%;
		}
		&-content{
			flex: 1;
			color: #999999;
		}
	}
	
	.btns{
		position: fixed;
		bottom: 60upx;
		left: 0;
		right: 0;
		display: flex;
	}

	.btn {
		flex: 1;
		margin: 0 40upx;
		height: 60upx;
		line-height: 60upx;
		border-radius: 30upx;
		font-size: 28upx;
		color: #fff;
		
		&-del{
			background: #d81e06;
		}
		
		&-recall{
			background: #4a96f2;
		}
	}
</style>
